<template>
	<view class="rich_list">
		<view class="navbar">
			<view class="nav_view">
				<view class="back" @click="deviceBack()">
					<image :src="`${baseImageUrl}/common/back.png`"></image>
					<view>江湖豪商榜</view>
				</view>
				<view class="money">
					<image :src="`${baseImageUrl}/common/gy.png`"></image>
					<text>{{silver}}</text>
				</view>
			</view>
		</view>
		<view class="header">
			<view class="header_view">
				<view class="tips">
					<image :src="`${baseImageUrl}/common/gy.png`"></image>
					<text>质押中的官银数量：</text>
				</view>
				<view class="number">{{pledge_value}}</view>
			</view>
			<view class="btn_view">
				<view class="cancel" @click="open(1)">质押</view>
				<view class="confirm" @click="open(2)">取出</view>
			</view>

			<view class="link_box">
				<!-- <view>说明</view> -->
				<view @click="router('/pages/home/silver_record')">日志</view>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="head">当前排名</view>
			<view class="my_item">
				<view class="ranking">{{count}}</view>
				<view class="info">
					<view class="avatar">
						<image :src="head_portrait"></image>
					</view>
					<view class="name">{{nickname}}</view>
				</view>
				<view class="number">
					<image :src="`${baseImageUrl}/common/gy.png`"></image>
					<text>{{pledge_value}}</text>
				</view>
			</view>
			<view class="list_head">
				<view class="ranking">排名</view>
				<view class="info">用户名</view>
				<view class="have">质押数量</view>
			</view>
			<view class="item" v-for="(item,index) in list">
				<view class="ranking">{{index+1}}</view>
				<view class="info">
					<view class="avatar">
						<image :src="item.user.head_portrait"></image>
					</view>
					<view class="name">{{item.user.show_phone}}</view>
				</view>
				<view class="number">
					<image :src="`${baseImageUrl}/common/gy.png`"></image>
					<text>{{item.value}}</text>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="popup_show" bgColor="transparent" mode="center" @close="close">
			<RichPledge :type="type" :silver="silver" :pledge_value="pledge_value" @close="close" />
		</u-popup>
	</view>
</template>

<script>
	import {
		back_url
	} from "@/utils/config.js";
	import {
		pledgeIndex
	} from '@/request/api.js';
	import RichPledge from '@/components/home/RichPledge.vue';
	export default {
		components: {
			RichPledge
		},
		data() {
			return {
				silver: "",
				count: 0,
				head_portrait: "",
				nickname: "",
				pledge_value: "",
				list: [],

				popup_show: false,
				type: ''
			}
		},
		onLoad() {
			this.getDeta();
		},
		methods: {
			deviceBack(number) {
				let routes = getCurrentPages();
				let url = routes[routes.length - 1].route;
				if (back_url.includes(url)) {
					let number = this.$store.state.tabbarIndex;
					this.redirectRouter(number);
				} else {
					this.backRouter();
				}
			},
			async getDeta() {
				let {
					user,
					count,
					pledge_value,
					phb
				} = await pledgeIndex();
				this.silver = user.silver;
				this.count = count;
				this.pledge_value = pledge_value;
				this.head_portrait = user.head_portrait;
				this.nickname = user.nickname;

				this.list = phb;
			},
			open(value) {
				this.type = value;
				this.popup_show = true;
			},
			close() {
				this.popup_show = false;
				this.getDeta();
			}
		}
	}
</script>

<style scoped lang="scss">
	.rich_list {
		height: 100vh;
		background: #29160D;
		overflow: hidden;

		.navbar {
			width: 100%;
			height: $navbarHeight;
			padding: 0 14rpx 12rpx;
			box-sizing: border-box;
			background: url(#{$baseImageUrl}/kills/nav.png) no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			position: relative;
			z-index: 99999;

			.nav_view {
				width: 100%;
				display: flex;
				justify-content: space-between;

				.back {
					display: flex;
					align-items: center;

					image {
						width: 62rpx;
						height: 31rpx;
					}

					view {
						color: #FFFFFF;
						font-size: 36rpx;
						font-weight: 400;
						font-family: LiSu;
					}
				}

				.money {
					min-width: 154rpx;
					height: 36rpx;
					background: #37302A;
					display: flex;
					align-items: center;
					position: relative;

					image {
						width: 42rpx;
						height: 42rpx;
						position: absolute;
						left: -21rpx;
						top: -3rpx;
					}

					text {
						color: #FFFEFE;
						font-size: 30rpx;
						font-weight: 400;
						padding-left: 38rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		$headerHeight: 340rpx;

		.header {
			height: $headerHeight;
			padding: 40rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;

			.header_view {
				.tips {
					display: flex;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						color: #FFFFFF;
						font-size: 28rpx;
						font-weight: 400;
						font-family: SimSun;
						padding-left: 10rpx;
						box-sizing: border-box;
					}
				}

				.number {
					color: #FFFFFF;
					font-size: 60rpx;
					font-weight: 400;
					font-family: SimSun;
					padding-top: 26rpx;
					box-sizing: border-box;
				}
			}

			.btn_view {
				width: 100%;
				display: flex;
				justify-content: center;

				view {
					width: 210rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: 400;
					margin: 0 16rpx;
				}

				.cancel {
					background: url(#{$baseImageUrl}/common/btn3.png) no-repeat;
					background-size: 100% 100%;
				}

				.confirm {
					background: url(#{$baseImageUrl}/common/btn.png) no-repeat;
					background-size: 100% 100%;
				}
			}

			.link_box {
				position: absolute;
				right: 0;
				top: 40rpx;
				z-index: 2;

				view {
					width: 180rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #FFFFFF;
					font-size: 24rpx;
					font-weight: 400;
					font-family: SimSun;
					padding-left: 100rpx;
					box-sizing: border-box;
					background: url(@/static/images/add/1123_4.png) no-repeat;
					background-size: 100% 100%;

					// &:first-child {
					// 	background: url(@/static/images/add/1123_3.png) no-repeat;
					// 	background-size: 100% 100%;
					// }

					// &:last-child {
					// 	background: url(@/static/images/add/1123_4.png) no-repeat;
					// 	background-size: 100% 100%;
					// }
				}
			}
		}

		.scroll_view {
			height: calc(100vh - #{$navbarHeight} - #{$headerHeight} + 30rpx);
			padding: 80rpx 54rpx 30rpx;
			box-sizing: border-box;
			background: url(@/static/images/add/1123_1.png) no-repeat;
			background-size: 100% 100%;

			.head {
				height: 82rpx;
				line-height: 82rpx;
				color: #000000;
				font-size: 24rpx;
				font-weight: 400;
				font-family: SimSun;
				padding-left: 24rpx;
				box-sizing: border-box;
			}

			.list_head {
				height: 82rpx;
				color: #000000;
				font-size: 24rpx;
				font-weight: 400;
				font-family: SimSun;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ranking {
					width: 110rpx;
					text-align: center;
				}

				.info {
					flex: 1;
					padding-left: 34rpx;
					box-sizing: border-box;
				}

				.have {
					width: 160rpx;
					text-align: center;
				}
			}

			.my_item,
			.item {
				width: 100%;
				height: 112rpx;
				background: url(@/static/images/add/1123_2.png) no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.ranking {
					width: 110rpx;
					text-align: center;
					color: #000000;
					font-size: 40rpx;
					font-weight: 400;
					font-family: SimSun;
				}

				.info {
					flex: 1;
					display: flex;
					align-items: center;

					.avatar {
						width: 72rpx;
						height: 72rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.name {
						color: #000000;
						font-size: 24rpx;
						font-weight: 400;
						font-family: SimSun;
						padding-left: 10rpx;
						box-sizing: border-box;
					}
				}

				.number {
					width: 160rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 30rpx;
						height: 30rpx;
					}

					text {
						color: #000000;
						font-size: 24rpx;
						font-weight: 400;
						font-family: SimSun;
						padding-left: 8rpx;
						box-sizing: border-box;
					}
				}
			}

			.item {
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}
</style>